<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
	
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.2/css/bootstrap.min.css">
	<link rel="stylesheet" href="http://blueimp.github.io/Gallery/css/blueimp-gallery.min.css">
	<link rel="stylesheet" href="css/bootstrap-image-gallery.min.css">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js"></script>
        <script src="http://cdn.bootcss.com/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
	<style>
	 .header h1{
		background-image:url(http://www.google.com.hk/images/srpr/logo4w.png);
		width:280px;
		height:30px;
	 }
	 .navbar-pink{
		background-color: #C36;
		border: 0;
		border-radius: 0;
		color:#fff;
		-webkit-box-shadow: rgba(114, 110, 110, 0.5) 1px 5px 5px;
		-moz-box-shadow: rgba(114, 110, 110, 0.5) 1px 5px 5px;
		box-shadow: rgba(114, 110, 110, 0.5) 1px 5px 5px;
	 }
	 .navbar-nav li a{
	   color:#fff;
	   font-size:16px;
	 }
	 .navbar-nav li a:hover{
		background-color: #a30052;
	 }
	 #footer {
		background-color: #B30558;
		border-top: 1px solid #1c9971;
		color: #a5d8c7;
		text-shadow: 0 1px 0 rgba(0,0,0,0.15);
		margin-top:50px;
	 }
	 #footer-inner {
		max-width: 940px;
		margin: 0 auto;
		padding-bottom: 20px;
		overflow: hidden;
		position: relative;
	 }
	
	.nav-foot p.footer-links {
	  margin-bottom: 15px;
	}
	.frendlinks ul {
		list-style: none;
		overflow: hidden;
		margin: 0;
		background: rgba(37, 20, 20, 0.35);
		text-align: justify;
	}
	.frendlinks ul li {
		float: left;
		margin-right: 10px;
		height: 25px;
		line-height: 25px;
		overflow: hidden;
	}
	footer a,.frendlinks ul li a{
	    color:#FFFAFA;
	}
	
	.pricing-row .item{
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		border-radius: 4px;
		background-color: #39b3d7;
		padding:5px;
		margin:auto 5px;
		border:2px;
		border-color:#269abc;
		color:#fff;
	}
	.pricing-row .item:hover{
		border:2px;
		border-color:#B30558;
	}
	.item h2,.item p:last-child{
		text-align:center;
	}
    .price {
		font-size: 30px;
		font-weight: bold;
		text-transform: uppercase;
		vertical-align: middle;
		display: table-cell;
		text-align:center;
	}
    .price-body {
		width: 125px;
		height: 125px;
		margin: 0 auto 15px auto;
		border: 2px solid #fff;
		border-radius: 100%;
		display: table;
	}
	.price-figure{
		color:#269abc;
	}
	.color-teal {
		color: #00A0B1;
	}
	.bg-white{
		background: #FFFFFF;
	}
	.icon-bar{
		background: #fff;
	}
	</style>
  </head>
  <body>
	<div class="header">
	  <div class="container">
		<h1>白雪公主影楼</h1>
	  </div>
	</div>
    <div class="navbar navbar-pink" role="navigation"><!---add class "navbar-fixed-top"---->
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">白雪公主影楼</a>
        </div>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="index.html">网站首页</a></li>
            <li><a href="case.html">作品展示</a></li>
			<li><a href="theme.html">主题风格</a></li>
            <li><a href="pricing.html">套系报价</a></li>
			<li><a href="about.html">关于我们</a></li>
			<li><a href="about.html#contacter">联系我们</a></li> 
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>
    
    <!-- 报价 ================================================== -->
	<div class="container pricing">
      <!-- Three columns of text below the carousel -->
      <div class="row pricing-row">
        <div class="col-md-8">
			<div class="item">
			  <img class="img-rounded"  alt="140x140" style="width: 100%; height: 100%;" src="images/s3.jpg">
			  <h2>Heading</h2>
			  <p>所以，对于商业产品设计师来说，我们的思维中要一直有一个声音，那就是我们的优化是不是能够真正的提高用户的效率，在效率和效果面前，我们要强迫自己选择前者。
 
二.可用性走查
平台系统的复杂度之高，超出预期，怎样衡量复杂系统的操作效率提升是体验优化的一个难题，思考之后，把产品的易学性作为我的设计出发点，就是通过统一、规范的系统能够让用户更容易学习和掌握平台产品具体的使用方法。
对整个系统超过30个页面进行可用性走查，根据用户体验设计要素，把系统按照结构层、框架层和表现层来进行梳理。结构层解决用户如何导到某个页面，做完去哪里。在梳理结构层的过程中不具体思考交互方式，只是从任务出发，来看流程和结构上能不能满足功能，在满足功能的基础上有没有提升的空间。框架层则解决页面的具体布局和交互方式，对系统页面的控件、布局等详细梳理，寻找改进空间。表现层解决产品的视觉呈现。


 
走查的主要结果如下：
结构层：
1.新建流程和修改流程不可逆，也就是说新建流程的设置，在修改的过程中无法完全一致的修改，这难免会让用户产生困惑，我去哪里修改呢。
2.工具使用页面跳转次数多，有的能够跳回，有的不能够跳回。
框架层：
1.多版本共存，遗留下来的一些最初版本的页面，交互和布局都和新页面不一致。
2.细节交互不一致，同一操作区域button的操作方式存在多种。
3.异常提示五花八门，没有规范。
表现层：
1.页面线条过多，影响视线的元素较多。
2.前端出于性能考虑提高了图片压缩比率，使得视觉呈现与设计师最初设计相差甚远。

 
三.改进方案
针对走查过程中的问题，在改进方案的确定过程中，充分考虑到系统的性能和用户的操作流，打磨系统结构和框架，列举一些体验优化点，如下：
 
1.引入全浮层的操作方式，能够在线性结构中带入想要的控件和模块，让层级更明了，打破新建和修改流程的壁垒。

 
2.将工具作为工具箱出现在页面下方，并能够展开和收起，使用时一键启用和关闭，真正按需呈现。

 
3.全新的视觉方案，从系统性能出发和前端共建产品视觉规范。优化后的系统UI，渐变和圆角均由css完成，考虑到浏览器的兼容性问题，还提供了纯色版本的配色方案。

 
4.建立产品交互及视觉规范，提高沟通效率，降低风险。

 
四.设计思考：
1.适度设计
商业产品对于适度设计的诉求更强烈，用使用者常见的操作方式，例如checkbox、redio button等互联网成型的交互方式更容易让用户接受和理解。另外，在选取交互和视觉方案的过程中，要充分考虑后期的实现成本和性能成本，低碳的设计能够让系统运行的更加安全流畅，更受欢迎。
2.知行合一
商业产品的使用者在使用产品的过程中是有着明确目的的，是在明确的decision上进行的操作，所以尽可能少在流程中打断用户，让他们困惑，最好在用户需要的时候能够提供工具或者解释说明等手段减少用户思考时间，提高使用效率。
3.形式追随功能
商业产品的视觉要更好的为功能服务，炫酷的视觉和交互经不起半秒钟的延迟，最受挫的是用户根本care不到（他们真的很忙）。</p>
			  <p><a class="btn btn-primary" href="#" role="button">View details »</a></p>
			</div>
        </div><!-- /.col-md-3 -->
        <div class="col-md-4">
			<div class="item">
			  <img class=""  alt="140x140" style="width: 100%; height: 100%;" src="img/qq.jpg">
			  <h3>人文艺术光效片场</h3>
			  <p>
			    <ul>
				  <li>特级资深中方主任级摄影师/专业人像灯光师一对一全程明星拍摄。</li>
				  <li>特级资深中方主任级化妆师全程服务；资深礼服设计师拍摄礼服挑选设计服务。</li>
				  <li>全程采用专业影视专用化妆品；全程提供拍摄专业道具。</li>
				</ul>
              </p>
			  <div class="price-body bg-white color-red">
				 <div class="price">
					<span class="price-figure">￥6649</span>
				 </div>
			  </div>
			  <p><a class="btn btn-primary" href="#" role="button">了解详情</a></p>
			</div>
        </div><!-- /.col-md-3 -->
	 
      </div><!-- /.row -->
	  


    </div> 

	<footer id="footer" class="footer hidden-print">
		<div id="footer-inner">
			<div class="partners">
				<a href="http://www.net.cn" target="_blank" class="wanwang" rel="nofollow"></a>
				<a href="http://vdisk.weibo.com/" class="weipan" target="_blank" rel="nofollow"></a>
				<a href="http://weibo.com/uidesign" target="_blank" class="weibo" rel="nofollow"></a>
				<a href="http://t.qq.com/youshege" target="_blank" class="tweibo" rel="nofollow"></a>
				<a href="http://qiniutek.com/" target="_blank" class="qiniu" rel="nofollow"></a>
				<p style="clear:both;">特别鸣谢 <a href="http://www.net.cn" target="_blank" rel="nofollow">万网</a> 赞助主机，<a href="http://www.qiniutek.com" target="_blank">七牛</a> 赞助图片加速</p>
			</div>
			<div class="nav-foot">
			<p class="footer-links"><a href="http://uisdc.com/ad/" rel="nofollow">广告合作</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://uisdc.com/duty/" rel="nofollow">免责声明</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://uisdc.com/friendlink/" rel="nofollow">友情链接</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://uisdc.com/contact/" rel="nofollow">联系我们</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://uisdc.com/about/" rel="nofollow">关于我们</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://e.weibo.com/uidesign/" rel="nofollow">@优秀网页设计</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;优设官方 QQ 群：<select style="display:inline;color:#000">
				<option class="fcg">181671383</option>
				<option class="fcr">87096978</option>
				<option class="fcr">192586823</option>
				<option class="fcr">158514561</option>
				<option class="fcr">216862992</option>
				<option class="fcr">124169968</option>
				<option class="fcr">96096993</option>
				<option class="fcr">199178798</option>
				<option class="fcr">79321884</option>
				<option class="fcr">244419297</option>
				<option class="fcr">193642837</option>
				<option class="fcr">179124119</option>
				<option class="fcr">172111170</option>
				<option class="fcr">277704164</option></select></p>
				<p class="credit">Copyright © 2013<strong> <a class="site-link" href="http://www.uisdc.com" title="优设-UISDC" rel="home"><span>优设-UISDC</span></a></strong> - 优秀网页设计联盟 Powered by <a class="wp-link" href="http://wordpress.org" title="State-of-the-art semantic personal publishing platform"><span>WordPress</span></a> and <a href="http://www.net.cn" rel="nofollow">中国万网</a> - <a target="_blank" href="http://www.miibeian.gov.cn">粤ICP备12017804号-1 </a></p>						<div style="display:none">
											<a href="http://tongji.baidu.com/hm-web/welcome/ico?s=7aeefdb15fe9aede961eee611c7e48a5" target="_blank">网站统计</a>
										</div>
									</div>
		<div class="frendlinks"><h6>友情链接</h6>
			<ul class="frendlink-ul">
				
				<li><a href="http://www.hao123.com/" title="hao123上网导航" target="_blank">hao123上网导航</a></li>
				<li><a href="http://hao.uisdc.com/" title="设计师网址导航为优秀网页设计联盟（SDC）旗下最实用、最专业、最全面、最好用的设计师导航！" target="_blank">设计师网址导航</a></li>
				<li><a href="http://cdc.tencent.com/" rel="nofollow" title="腾讯用户研究与体验设计中心" target="_blank">腾讯CDC</a></li>
				<li><a href="http://ueo.baidu.com/" title="百度联盟事业部用户体验团队官方博客" target="_blank">百度联盟UEO</a></li>
				<li><a href="http://uxc.360.cn/" title="360用户体验设计中心" target="_blank">360用户体验设计</a></li>
				<li><a href="http://ued.taobao.com/" title="淘宝UED" target="_blank">淘宝UED</a></li>
				<li><a href="http://udc.weibo.com/" title="新浪微博设计团队" target="_blank">新浪微博设计团队</a></li>
				<li><a href="http://vc.changyou.com" rel="nofollow" title="搜狐畅游VC" target="_blank">搜狐畅游VC</a></li>
				<li><a href="http://www.hubei.com/" title="武汉生活第一门户，湖北网(hubei.com)是一个专门为武汉1000万武汉人提供武汉本地生活、消费信息、购物指导和情感交流的网上生活家园" target="_blank">湖北网</a></li>
				<li><a href="http://hao.qq.com/" title="QQ导航–腾讯旗下的网址导航，收录休闲生活相关的优秀网站，为您提供最便捷最安全的网址大全服务" target="_blank">QQ网址导航</a></li>
				<li><a href="http://hao.360.cn/" title="360安全网址导航" target="_blank">360安全网址导航</a></li>
				<li><a href="http://www.iconfans.org/" title="iconfans" target="_blank">iconfans</a></li>
				<li><a href="http://nav80.com/" title="Nav80设计师网址导航" target="_blank">Nav80网址导航</a></li>
				<li><a href="http://ux.etao.com/" title="一淘UX用户体验中心" target="_blank">一淘UX</a></li>
				<li><a href="http://ecd.tencent.com/" rel="nofollow" title="腾讯电商ecd" target="_blank">腾讯电商ecd</a></li>
				<li><a href="http://isux.tencent.com/" title="腾讯社交用户体验设计" target="_blank">腾讯ISUX</a></li>
				<li><a href="http://www.gn00.com/" target="_blank">技术宅社区</a></li>
				<li><a href="http://www.shejidaren.com/" title="谈谈网页设计、用户体验，聊聊前端开发，分享高质量设计资源和灵感，爱设计，爱分享" target="_blank">设计达人</a></li>
				<li><a href="http://shop62443992.taobao.com/" rel="nofollow" title="瓷言瓷语" target="_blank">设计师的陶瓷铺子</a></li>
				<li><a href="http://www.itnews001.com/" title="专业的IT科技、数码、电脑、软件硬件、手机、游戏、苹果、iphone、ipad、安卓、互联网、创意概念、设计资讯报道" target="_blank">IT资讯网</a></li>
				<li><a href="http://tgideas.qq.com/" title="腾讯游戏的专业设计团队" target="_blank">腾讯TGideas</a></li>
				<li><a href="http://pcedu.pconline.com.cn/sj/" target="_blank">PConline创意设计</a></li>
				</ul>
			</div>
		</div>
	</footer>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.2/js/bootstrap.min.js"></script>
	<script src="http://blueimp.github.io/Gallery/js/jquery.blueimp-gallery.min.js"></script>
	<script src="js/bootstrap-image-gallery.js"></script>
	<script src="js/demo.js"></script>
  </body>
</html>